<template>
    <el-container class="home-container">
      <!--   头部区域   -->
      <el-header>
        <div>
          <img src="../assets/img/favicon.png">
          <span>周边游后台管理系统</span>
        </div>
        <div>
          <el-button type="primary" @click="welcome">用户中心</el-button>
          <el-button type="info" @click="logout">退出</el-button>
        </div>

      </el-header>
      <!--   主体区域区域   -->
      <el-container>
        <!--   左侧侧边栏区域     -->
        <el-aside :width="isCollapse ?'64px':'200px'">
          <!--    侧边栏折叠按钮      -->
          <div class="toggle-button" @click="toggleCollapse" title="折叠展开">
            |||
          </div>
          <div
              style="
              font-size: 15px;
              line-height: 24px;
              color: #fff;
              margin-top: 10px;
              text-align: center;">
            <div>
              &nbsp;
              <el-avatar v-show="loginUser.image"  v-bind:src="loginUser.image"></el-avatar>
            </div>
            <span>{{loginUser.name}}</span>
          </div>
          <!--     侧边栏菜单区域     -->
          <el-menu
              background-color="#333744"
              text-color="#fff"
              active-text-color="#409EFF"
              unique-opened
              :collapse="isCollapse"
              :collapse-transition="false"
              router>
            <!--     用户一级菜单       -->
            <el-submenu index="1">
              <!--      用户一级菜单模板区域        -->
              <template slot="title">
                <!--      用户一级菜单图标        -->
                <i class="el-icon-user"></i>
                <!--      用户一级菜单文本        -->
                <span>用户管理</span>
              </template>
              <!--      用户二级菜单        -->
              <el-menu-item :index="'/system/user'">
                <!--      用户二级菜单模板区域        -->
                <template slot="title">
                  <!--      用户二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      用户二级菜单文本        -->
                  <span>用户列表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <!--     权限一级菜单       -->
            <el-submenu index="2">
              <!--      权限一级菜单模板区域        -->
              <template slot="title">
                <!--      权限一级菜单图标        -->
                <i class="el-icon-s-operation"></i>
                <!--      权限一级菜单文本        -->
                <span>权限管理</span>
              </template>
              <!--      权限二级菜单模        -->
              <el-menu-item index="2-1">
                <!--      权限二级菜单模板区域        -->
                <template slot="title">
                  <!--      权限二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      权限二级菜单文本        -->
                  <span>权限列表</span>
                </template></el-menu-item>
            </el-submenu>
            <!--     业务一级菜单       -->
            <el-submenu index="3">
              <!--      业务一级菜单模板区域        -->
              <template slot="title">
                <!--      业务一级菜单图标        -->
                <i class="el-icon-s-shop"></i>
                <!--      业务一级菜单文本        -->
                <span>业务管理</span>
              </template>
              <!--      业务二级菜单       -->
              <el-menu-item :index="'/business/category'">
                <!--      业务二级菜单模板区域        -->
                <template slot="title">
                  <!--      业务二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      业务二级菜单文本        -->
                  <span>分类管理</span>
                </template>
              </el-menu-item>
              <el-menu-item :index="'/business/travel'">
                <!--      业务二级菜单模板区域        -->
                <template slot="title">
                  <!--      业务二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      业务二级菜单文本        -->
                  <span>游玩列表</span>
                </template>
              </el-menu-item>
              <el-menu-item :index="'/business/activity'">
                <!--      业务二级菜单模板区域        -->
                <template slot="title">
                    <!--      业务二级菜单图标        -->
                    <i class="el-icon-menu"></i>
                    <!--      业务二级菜单文本        -->
                    <span>活动列表</span>
                </template>
              </el-menu-item>
              <el-menu-item :index="'/business/point'">
                <!--      业务二级菜单模板区域        -->
                <template slot="title">
                  <!--      业务二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      业务二级菜单文本        -->
                  <span>打卡点列表</span>
                </template>
              </el-menu-item>
              <el-menu-item :index="'/business/organ'">
                <!--      业务二级菜单模板区域        -->
                <template slot="title">
                  <!--      业务二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      业务二级菜单文本        -->
                  <span>机构列表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <!--     文件一级菜单       -->
            <el-submenu index="4">
              <!--      文件一级菜单模板区域        -->
              <template slot="title">
                <!--      文件一级菜单图标        -->
                <i class="el-icon-s-shop"></i>
                <!--      文件一级菜单文本        -->
                <span>文件管理</span>
              </template>
              <!--      文件二级菜单       -->
              <el-menu-item :index="'/file/file'">
                <!--      文件二级菜单模板区域        -->
                <template slot="title">
                  <!--      文件二级菜单图标        -->
                  <i class="el-icon-menu"></i>
                  <!--      文件二级菜单文本        -->
                  <span>文件管理</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--   右侧主要内容区域     -->
        <el-main>
          <!--    路由占位符      -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
/*
* @click="toggleCollapse" 折叠展开点击事件
* */
export default {
  name: "Admin",
  mounted() {
    let _this = this;
    _this.loginUser = Tool.getLoginUser();
    console.log("登录信息",_this.loginUser);
  },
  data(){
    return{
      loginUser: {},
      // 是否折叠
      isCollapse:false,
    }
  },
  methods:{
    welcome(){
      this.$router.push('/welcome')
    },
    logout(){
      let _this = this;
      _this.$ajax.get(process.env.VUE_APP_SERVER+'/system/admin/user/logout/' + _this.loginUser.token).then(
          (response)=>{
            let resp = response.data;
            if (resp.success){
              Tool.setLoginUser(resp.content);
              Tool.setLoginUser(null);
              _this.$router.push("/login")
              _this.$message.success("退出成功")
            }else{
              _this.$message.error("退出失败")
            }
          });
    },
    toggleCollapse(){
      //当点击按钮的时候,切换菜单的折叠与展开
      // 更改:collapse="isCollapse"的默认布尔值为false到true
      this.isCollapse = ! this.isCollapse
    }
  }
}
</script>

<style lang="less" scoped>

/*
* .home-container 系统组件 类名选择器 最大容器
* .el-heade 系统组件 类名选择器 头部区域
* .el-aside 系统组件 类名选择器 左侧侧边栏区域
* .el-main  系统组件 类名选择器 右侧主要内容区域
* .toggle-button 系统组件 类名选择器 折叠展开按钮
*/
.home-container{
 height: 100%;
}
.el-header{
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  align-items: center;
  color: #ffffff;
  font-size: 25px;
  >div{
    display: flex;
    align-items: center;
    span{
      margin-left: 15px;
    }
  }
}
.el-aside{
  background-color: #333744;
  .el-menu{
    border-right: none;
  }
}
.el-main{
  background-color: #eaedf1;
}
.toggle-button{
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>